<template>
  <div class="statics-file">
    <el-table :data="dataSource" style="width: 100%" border>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :label="column"
        :prop="column"
        min-width="100"
        align="center"
      >
        <template slot-scope="{ row }">
          {{
            ~column.indexOf("时间")
              ? parseTime(row[column])
              : row[column]
          }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { parseTime } from "@/utils/index";
export default {
  name: "StaticsCustomTable",
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    dataSource: {
      handler(value) {
        this.getTableColumns(value[0]);
      },
      immediate: true,
    },
  },
  data() {
    return {
      columns: [],
    };
  },
  methods: {
    parseTime,
    // 获取表格columns
    getTableColumns(row) {
      this.columns = Object.keys(row);
    },
    // 导出表格
    handleExportExcel(tableName = '查询结果') {
      // 普通打印 前端excel导出
      const valueList = this.dataSource.map(row => {
          return Object.values(row)
      })
      
      // 空数据导出判断
      if (!this.columns.length) {
        this.$message.warning("暂无数据可以导出");
        return;
      }
      import("@/vendor/Export2Excel").then((excel) => {
        excel.export_json_to_excel({
          header: this.columns,
          data: valueList,
          filename: tableName,
        });
      });
    },
  },
};
</script>
